<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="css/msg.css">
    <link rel="stylesheet" href="css/index.css">
</head>
    <style>
        .register_box{
            display: none;
        }
    </style>
<body>
    <div class="layout">
        <div class="tabs">
            <div class="tab_item active">登录</div>
            <div class="tab_item">注册</div>
        </div>
        <!-- 登录 -->
        <div class="login_box g_w">
            <div class="tit">欢迎登录 时空大数据平台</div>
            <div class="inps">
                <div class="inp_item">
                    <div class="inp_box">
                        <img src="img/user.png">
                        <input class="inp login_username" type="text" placeholder="用户名">
                    </div>
                </div>
                <div class="inp_item">
                    <div class="inp_box">
                        <img src="img/password.png">
                        <input class="inp login_password" type="password" placeholder="密码">
                    </div>
                </div>
                <div class="check_box">
                    <label class="check" for="check">
                        <input id="check" class="login_remember" type="checkbox">
                        <p>保持登录状态</p>
                    </label>
                    <!-- <span class="reset_pwd">忘记密码？</span> -->
                </div>
            </div>
            <div class="btn_box">
                <button class="btn" id="login_btn">登录</button>
            </div>
        </div>
        <!-- 注册 -->
        <div class="register_box g_w">
            <div class="tit">欢迎注册 时空大数据平台</div>
            <div class="inps">
                <div class="inp_item">
                    <div class="inp_box">
                        <input class="inp register_name" data-mod="yhm" type="text" placeholder="用户名">
                        <div class="rule_box">
                            <p>
                                <img data-index="0" src="img/yuan.png">
                                <span>用户名必须包含4~18个字符，由数字、字母、下划线或中划线组成，且以字母开头</span>
                            </p>
                            <p>
                                <img data-index="1" src="img/yuan.png">
                                <span>长度不应超过255个字符</span>
                            </p>
                            <p>
                                <img data-index="2" src="img/yuan.png">
                                <span>不应包含;\/.</span>
                            </p>
                        </div>
                    </div>
                    <p class="tip"></p>
                </div>
                <div class="inp_item">
                    <div class="inp_box">
                        <input class="inp register_nickname" data-mod="nc" type="text" placeholder="昵称">
                        <div class="rule_box">
                            <p>
                                <img data-index="0" src="img/yuan.png">
                                <span>4-30 个字符，且不能包含除空格外的特殊字符</span>
                            </p>
                        </div>
                    </div>
                    <p class="tip"></p>
                </div>

                <div class="inp_item">
                    <div class="inp_box">
                        <input class="inp register_pass" data-mod="mm" type="password" placeholder="密码">
                        <div class="rule_box">
                            <p>
                                <img data-index="0" src="img/yuan.png">
                                <span>密码长度至少为8个字符</span>
                            </p>
                            <p>
                                <img data-index="1" src="img/yuan.png">
                                <span>密码至少包含大写字母、小写字母、数字及特殊字符中的任意三种</span>
                            </p>
                            <p>
                                <img data-index="2" src="img/yuan.png">
                                <span>密码不能包含三个连续的相同字符</span>
                            </p>
                            <p>
                                <img data-index="3" src="img/yuan.png">
                                <span>密码不能包含三个或三个以上连续字符</span>
                            </p>
                            <p>
                                <img data-index="4" src="img/yuan.png">
                                <span>根据键盘阵列，密码不能包含三个或三个以上横排连续的字符</span>
                            </p>
                            <p>
                                <img data-index="5" src="img/yuan.png">
                                <span>密码不能包含用户名及其倒写</span>
                            </p>
                        </div>
                    </div>
                    <p class="tip"></p>
                </div>

                <div class="inp_item">
                    <div class="inp_box">
                        <input class="inp register_confirm_pass" data-mod="qrmm" type="password" placeholder="确认密码">
                    </div>
                    <p class="tip"></p>
                </div>

            </div>
            <div class="btn_box">
                <button class="btn" id="reg_btn">注册</button>
            </div>
        </div>
    </div>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/msg.js"></script>
    <script src="js/apis.js"></script>
    <script src="js/login.js"></script>
</body>

</html>